<style lang="scss">
  .tabs {
    max-width:480px;
    margin:0 20px 10px!important;
  }
  tr{
    cursor: pointer;
  }
  tr.actived{
    background: #eee;
  }
  .btn{
    display: inline-block;
    min-width: 50px;
  }
  select{
    height: 30px;
  }
</style>
<template>
  <main>
    <div class="tile is-ancestor">
      <div class="tile is-parent is-8">
      <tabs ref="tab" type="boxed" animation="slide" :only-fade="false">
        <tab-pane v-for="it in menus" :label="it.name+'分类列表'">
          <table class="table">
            <thead>
            <tr>
              <th>分类ID</th>
              <th>分类名称</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(item,index) in list">
              <tr @click="getModify(item.id)" :class="{'actived': item.id == id}">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td class="is-icon">
                  <div class="btn-group">
                    <span @click="deletes(item.id)" class="btn">
                      删除
                    </span>
                  </div>
                </td>
              </tr>
            </template>
            </tbody>
          </table>
          <page :data.sync="pageData" @choose="getList"></page>
        </tab-pane>
      </tabs>
      </div>
      <div class="tile is-parent is-4" style="height: 200px;border-left: 1px solid #dfdfdf">
        <article class="tile is-child">
        <h4 class="title is-5">新建/编辑</h4>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">名称</label>
          </div>
          <div class="control">
            <input class="input" v-model="param.name" type="text">
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">图片</label>
          </div>
          <div class="control">
            <input class="input" v-model="param.image" type="text">
          </div>
        </div>
        <!--<div class="control is-horizontal">-->
          <!--<div class="control-label">-->
            <!--<label class="label">语言</label>-->
          <!--</div>-->
          <!--<div class="control">-->
            <!--<input class="input" v-model="param.langKey" type="text">-->
          <!--</div>-->
        <!--</div>-->
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">描述</label>
          </div>
          <div class="control">
            <input class="input" v-model="param.description" type="text">
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">排序</label>
          </div>
          <div class="control">
            <input class="input" v-model="param.displayOrder" type="text">
          </div>
        </div>
        <p style="text-align: center">
          <span @click="adds" class="button">添加</span>
          <span @click="modify" class="button" style="margin-left: 20px">修改</span>
        </p>
      </article>
      </div>
    </div>
  </main>
</template>

<script>
  import mixin from './mixin'
  export default {
    mixins:[mixin],
    data () {
      return {
        param:{},
        menu:[],
        menus:[
//          {id:'88697194420396032',name:'产品'},
          {id:'88698031519588352',name:'资讯'},
        ],
        tpl:{
          '/time.html':'tplTime',
          '/item.html':'tplItem',
          '/detail.html':'tplDetail'
        },
        parentId:'',
        parentIds:'',
        listType:true,
        list1:[],
        list2:[],
      }
    },
    watch: {
    },
    methods: {
      open (id) {
        this.list1 = this.list.filter(function(data){
          if(data.parentId == id){
            return data
          }
        })
        this.parentId = id
        this.parentIds = ''
        this.list2 = []
      },
      opens (id) {
        this.list2 = this.list.filter(function(data){
          if(data.parentId == id){
            return data
          }
        })
        this.parentIds = id
      },
      close () {
        this.parentId = ''
        this.parentIds = ''
      },
      closes () {
        this.parentIds = ''
      },
      getMenu (callback) {
        let vm = this
        this.$http('menu/api/menus',{}).then(function(res){
          vm.menu = res.data
          if(callback){
            callback.apply()
          }
        })
      },
      getList (num) {
        let vm = this
        this.page.page = num?num:0
        this.listType = true
        this.param = {
          description: "",
          displayOrder: 0,
          image: null,
          langKey: "zh",
          name: "",
          parentId: '88698031519588352',
          parentName: null
        }
        this._get('classification/api/parent/'+this.menus[this.$refs.tab.realSelectedIndex].id+'/categories',this.page)
      },
      getModify (id,type) {
        if (type == 0) {
          if (id == this.id) {
            this.close()
          }else{
            this.open(id)
          }
        } else if (type == 1) {
          if (id == this.id) {
            this.closes()
          }else{
            this.opens(id)
          }
        }
        this.id = id
        this._getModify('classification/api/categories/'+id,{})
      },
      modify () {
        this._modify('classification/api/categories',Object.assign({id:this.id},this.param),this.getList)
      },
      adds () {
        this._add('classification/api/categories',this.param,this.getList)
      },
      deletes (id) {
        this._delete('classification/api/categories/'+id,{},this.getList)
      }
    },
    mounted () {
      this.getMenu(this.getList)
      let vm = this
      $('.tab-list').on('click',function(){
          vm.id = ''
          vm.getList()
      })
    },
  }
</script>
